iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 28
0
Modern Web

使用 webpack 模組化你的程式碼,讓人生更美好。系列 第 28

<28 - 番外篇 02> webpack 與 gulp 聯手 - 整合 webpack-dev-server

  • 分享至 

  • xImage
  •  

在昨天的 <27 - 番外篇 01> webpack 與 gulp 聯手 - 安裝 gulp 文章當中,已經瞭解到如何整合 webpack 與 gulp,只要執行 gulp webpack 指令,就可以執行 webpack 了。

但還有另外一樣東西是 webpack-dev-server,進一步我希望在每次執行 gulp 的時候,也要能執行 webpack-dev-server 以及 webpack 指令。

先修改 webpack.config.js

由於我在實際測試的過程當中,發現 output.path 一定要寫成絕對路徑,才能測試通過,否則會有錯誤訊息。

故先新增第一行,將 path require 進來,不需要安裝,這是預設就有的:

var path = require('path');

然後再將以下的部份:

…

module.exports = {
  entry: {
    …
  },
  output: {
     …
     path: './dist',
     …
  }
  …
}

修改成:

…

module.exports = {
  entry: {
    …
  },
  output: {
     …
     path: path.resolve(__dirname, 'dist'),
     …
  }
  …
}

這樣就可以囉。

修改 gulpfile.js

以下修改兩個部份:

  • webpack-dev-server 給 require 進來。
  • 建立一個名稱為 webpack-dev-server 的 task。
var gulp = require('gulp');
var gutil = require("gulp-util");
var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");
var webpackConfig = require("./webpack.config.js");

…

gulp.task("webpack-dev-server", function(callback) {
	var myConfig = Object.create(webpackConfig);

	// Start a webpack-dev-server
	new WebpackDevServer(webpack(myConfig), {
		publicPath: "/" + myConfig.output.publicPath,
		stats: {
			colors: true
		}
	}).listen(8080, "localhost", function(err) {
		if(err) throw new gutil.PluginError("webpack-dev-server", err);
		gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/index.html");
	});
});

接下來只要再執行 gulp webpack-dev-server 就相當於執行 webpack-dev-server 指令了。

然而我希望只要執行 gulp 指令時,就可以先執行 webpack-dev-server 任務,再執行 webpack 任務,那我就將 gulpfile.js 的以下這行:

gulp.task('default', function() {
  …
});

改成:

gulp.task("default", ["webpack-dev-server", "webpack"]);

這時我只要執行 gulp 指令,就會依序執行 webpack-dev-server 任務,再執行 webpack 任務。

大功告成,這樣就很順利的利用 gulp 將各種任務(以此例就是 webpackwebpack-dev-server 兩個任務)串連起來了。/images/emoticon/emoticon58.gif


敬請期待明天最後的番外篇~/images/emoticon/emoticon41.gif


上一篇
<27 - 番外篇 01> webpack 與 gulp 聯手 - 安裝 gulp
下一篇
<29 - 番外篇 03> webpack 與 gulp 聯手 - Stats 調校輸出訊息
系列文
使用 webpack 模組化你的程式碼,讓人生更美好。30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言